<template>
  <el-form ref="form" :model="formData" :label-width="labelWidth" :rules="rules">
    <el-row :gutter="24">
      <el-col v-for="(item, index) in formColums" :span="item.span" :key="index + item.prop">
        <el-form-item :label="item.label" :prop="item.prop">
          <slot :name="item.slot"></slot>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: "hhForm",
  props: {
    formColums: {
      type: Array,
      default: () => {
        return [
          {
            label: "名字",
            prop: "string",
            span: 24,
            slot: "string",
            render: ""
          }
        ];
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {};
      }
    },
    labelWidth: {
      type: String,
      default: "80px"
    }
  },
  methods: {
    validate(funs) {
      this.$refs.form.validate((valid) => {
        funs(valid);
      });
    },
    clearValidate() {
      this.$refs.form.clearValidate();
    },
    resetField() {
      this.$refs.form.resetFields();
    }
  }
};
</script>